<template>
    <div class="hotel" >
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
            <el-breadcrumb-item>酒店预定</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row type="flex" :gutter="20" class="hotel-search">
          <el-col>
              <el-autocomplete
                :fetch-suggestions="getCityList"
                placeholder="广州"
                class="el-autocomplete"
                v-model="hotelData.searchCity"
                @select="selectCity"
                :trigger-on-focus="false"
                :highlight-first-item="true"
              ></el-autocomplete>
          </el-col>
          <el-col>
            <el-date-picker
              @change="pickDate"
              value-format="yyyy-MM-dd"
              :editable="false"
              v-model="durationDays"
              type="daterange"
              range-separator="-"
              start-placeholder="入住日期"
              end-placeholder="离店日期">
            </el-date-picker>
          </el-col>
          <el-col class="hotel-person-dropdown">
              <el-input
                placeholder="人数未定"
                suffix-icon="el-icon-user"
                v-model="personNum"
                @click.native.stop="selectPerson"
                maxlength="0"
                readonly
                >
              </el-input>
              <div class="hotel-person" v-if="personShow" @click.stop="curPerson">
                <span>每间</span>
                <el-dropdown trigger="click" @command="handleAdultCommand">
                    <span class="el-dropdown-link">
                     {{adultNum}} 成人<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">1人</el-dropdown-item>
                    <el-dropdown-item command="2">2人</el-dropdown-item>
                    <el-dropdown-item command="3">3人</el-dropdown-item>
                    <el-dropdown-item command="4">4人</el-dropdown-item>
                    <el-dropdown-item command="5">5人</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown trigger="click" @command="handleChildrenCommand">
                    <span class="el-dropdown-link">
                     {{childrenNum}} 儿童<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">1人</el-dropdown-item>
                    <el-dropdown-item command="2">2人</el-dropdown-item>
                    <el-dropdown-item command="3">3人</el-dropdown-item>
                    <el-dropdown-item command="4">4人</el-dropdown-item>
                    <el-dropdown-item command="5">5人</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <el-button size="mini" type="primary" @click.native="confirmPNumber">确认</el-button>
              </div>
          </el-col>
          <el-col>
            <el-button type="primary" @click="consultPrice">查询价格</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" class="hotel-map">
          <el-col :span="13" >
            <div class="hotel-map-scenics" :style="displayItem === true? 'height: 175px' : 'height : 100px'">
                 <div>区域：</div>
                  <el-tag  v-for="item in cityInfo.scenics.slice(0,29)" :key="item.id" >
                    {{item.name}}
                  </el-tag>
            </div>
            <div @click="changeHeight"> <span style="color:orange;font-size:20px">{{displayItem === true? '⬆' : '⬇'}}</span> <span style="color:gray">等{{cityInfo.scenics.slice(0,29).length}}个景点</span> </div>
            <div class="hotel-average-price">
              <el-badge :value="'?'" class="item badge" type="info"  @mousemove.native.stop="showTip" @mouseleave.native="hideTip">
                <el-button size="small" style="border：0">均价</el-button>
                <span class="tip" v-if="showTipS">等级均价由平日价格计算得出，节假日价格会有上浮</span>
              </el-badge>
               <span>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        ¥332
                </span>
                <span>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        ¥521
                </span>
                <span>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        ¥768
                </span>
            </div>
          </el-col>

          <el-col :span="11">
            <!-- <div class="hotel-map-con">地图</div> -->
            <amap :loc="loc"/>
          </el-col>
        </el-row>
        <keep-alive>
          <hotelFilter/>
        </keep-alive>

        <keep-alive>
          <hotelItems class="items" :hotelData="hotelData" :isIndex="isIndex" @hotelData="getHotelData"/>
        </keep-alive>

  </div>
</template>

<script>
import hotelFilter from '../../components/hotel/hotelFilter'
import hotelItems from './hotelItems'
import amap from '../../components/hotel/Amap'
export default {
  components: {
    hotelFilter,
    hotelItems,
    // eslint-disable-next-line vue/no-unused-components
    amap
  },
  data () {
    return {
      durationDays: '',
      personNum: '',
      hotelData: {
        searchCity: '',
        cityId: '',
        price: 4000
      },
      cityInfo: {
        scenics: []
      },
      personShow: false,
      adultNum: 0,
      childrenNum: 0,
      enterTime: '',
      leftTime: '',
      displayItem: false,
      loc: [],
      isIndex: 1,
      showTipS: false
    }
  },
  methods: {
    selectPerson () {
      this.personShow = !this.personShow
    },
    curPerson () {
      this.personShow = true
    },
    hidePerson () {
      const t = this
      document.body.onclick = function (e) {
        e.stopPropagation()
        t.personShow = false
      }
    },
    handleAdultCommand (command) {
      this.adultNum = command
    },
    handleChildrenCommand (command) {
      this.childrenNum = command
    },
    confirmPNumber () {
      this.personNum = `${this.adultNum}成人 ${this.childrenNum}儿童`
      this.personShow = false
    },
    selectCity (item) {
      this.hotelData.cityId = item.id
      // this.$router.push({
      //   path: '/hotel',
      //   query: {
      //     cityName: item.name,
      //     price_lt: this.hotelData.price
      //   }
      // })
    },
    getCityList (city, cb) {
      if (!city) return
      this.$http.get('/airs/city', { params: { name: city } }).then(res => {
        const { data } = res.data
        const newData = data.map(v => {
          return {
            ...v,
            value: v.name
          }
        })
        this.hotelData.searchCity = newData[0].name
        this.hotelData.cityId = newData[0].id
        console.log(newData[0].id)
        cb(newData)
      }).catch(err => {
        console.log(err)
      })
    },
    getCityData () {
      this.$http.get('/cities', {
        params: {
          name: this.$route.query.cityName,
          enterTime: this.enterTime,
          leftTime: this.leftTime
        }
      }).then(res => {
        const { data } = res.data
        console.log(data)
        this.hotelData.searchCity = this.$route.query.cityName
        this.hotelData.cityId = data[0].id
        this.cityInfo = data[0]
        console.log(data)
      })
    },
    pickDate (val) {
      console.log(val)
      this.enterTime = val[0]
      this.leftTime = val[1]
    },
    changeHeight () {
      this.displayItem = !this.displayItem
    },
    consultPrice () {
      this.$router.push({
        path: '/hotel',
        query: {
          cityName: this.hotelData.searchCity,
          enterTime: this.enterTime || '',
          leftTime: this.leftTime || ''
        }
      })
    },
    getHotelData (data) {
      console.log(data)
      this.loc = []
      if (data.length !== 0) {
        data.forEach(locs => {
          this.loc.push(locs.location)
        })
      } else {
        this.loc = [
          {
            latitude: '23.1066805',
            longitude: 113.3245904
          }
        ]
      }

      console.log(this.loc)
    },
    showTip () {
      this.showTipS = true
    },
    hideTip () {
      this.showTipS = false
    }
  },
  mounted () {
    this.getCityData()
    this.hidePerson()
  },
  watch: {
    $route () {
      this.getCityList()
    }
  }
}
</script>

<style lang="less" scoped>
.hotel{
  width: 1000px;
  margin: 0 auto;
  .el-breadcrumb{
    font-size: 16px;
    padding: 10px 0;
  }
  .hotel-search{
    padding: 10px 0;
  }
  .hotel-map{
    padding: 10px 0;
    min-height: 250px;
    .iconfont{
      color: orange;
    }
    .badge{
      position: relative;
      margin-right: 15px;
        /deep/.el-button{
           border: 0;
        }
        /deep/.el-badge__content--info:hover .tip{
          background-color: chartreuse;
        }
        .tip{
          padding: 0 5px;
          position: absolute;
          font-size: 10px;
          background-color: darkblue;
          color: floralwhite;
          top: -20px;
          right: -290px;
          z-index: 100;
          width: 290px;
        }
    }
    .hotel-map-con{
      width: 420px;
      height: 260px;
      background-color: coral;
      margin-left: 50px;
    }
    .hotel-map-scenics{
      height: 138px ;
      overflow: hidden;
    }
    .hotel-average-price{
      margin-top: 20px;
    }
  }
  .items{
    margin: 10px 0;
  }
  .el-tag{
    margin: 3px 3px;
  }
  .hotel-person-dropdown{
    position: relative;
    .hotel-person{
      position: absolute;
      z-index: 22;
      width: 250px;
      height: 100px;
      top: 50px;
      background-color: #fff;
      span{
        font-size: 14px;
      }
      .el-dropdown{
        width: 100px;
        margin-left: 10px;
        border: 1px solid #eee;
      }
      .el-button{
        position: absolute;
        bottom: 5px;
        right: 3px;
      }
      /deep/.el-dropdown-link{
          width: 100px;
          .el-icon--right{
            margin-left: 40px;
            background-color: #fff;
          }
        }
    }
  }
  /deep/.el-dropdown-menu__item{
    width: 100px;
  }
}
</style>
